import { useState } from 'react';
import { Header } from '../components/Header';
import { Footer } from '../components/Footer';
import { ImageWithLoading } from '../components/ImageWithLoading';
import { ChevronRight, Star, Check, Heart, Share2 } from 'lucide-react';
export const ProductDetailPage = () => {
  const [activeImage, setActiveImage] = useState(0);
  const [activeTab, setActiveTab] = useState('description');
  // Mock product data
  const product = {
    id: 'omron-platinum-bp-monitor',
    name: 'Omron Platinum Blood Pressure Monitor',
    brand: 'Omron',
    price: 89.99,
    rating: 4.8,
    reviewCount: 324,
    availability: 'In Stock',
    description: 'The Omron Platinum Blood Pressure Monitor provides clinical-grade accuracy for home use. With its easy-to-read display and one-touch operation, monitoring your blood pressure has never been easier.',
    features: ['Clinical-grade accuracy validated in multiple studies', 'Large, easy-to-read backlit display', 'Stores up to 200 readings with date and time stamps', 'Detects irregular heartbeats', 'Comfortable, adjustable cuff fits arm circumference 9" to 17"', 'Smartphone connectivity via Bluetooth', 'Rechargeable battery with USB-C charging'],
    specifications: {
      'Measurement Range': 'Pressure: 0 to 299 mmHg, Pulse: 40 to 180 beats/min',
      Accuracy: 'Pressure: ±3 mmHg, Pulse: ±5% of reading',
      Memory: '200 readings for 2 users (total 400)',
      'Cuff Size': 'Fits arm circumference 9" to 17" (22-42 cm)',
      'Power Source': 'Rechargeable lithium-ion battery',
      'Battery Life': 'Approximately 1 month with 3 measurements per day',
      Dimensions: '4.7" x 3.5" x 1.9" (120 x 90 x 50 mm)',
      Weight: '8.8 oz (250 g) without cuff',
      Warranty: '5 years'
    },
    images: [
      'https://picsum.photos/800/600?random=30', 
      'https://picsum.photos/800/600?random=31', 
      'https://picsum.photos/800/600?random=32'
    ],
    relatedProducts: [{
      id: 'beurer-bm55-monitor',
      name: 'Beurer BM55 Upper Arm Monitor',
      image: 'https://picsum.photos/600/400?random=beurer-bm55',
      price: 99.99,
      rating: 4.7
    }, {
      id: 'ihealth-track-smart',
      name: 'iHealth Track Smart Monitor',
      image: 'https://picsum.photos/600/400?random=ihealth-track',
      price: 129.99,
      rating: 4.9
    }, {
      id: 'withings-bpm-connect',
      name: 'Withings BPM Connect Wi-Fi',
      image: 'https://picsum.photos/600/400?random=withings-bpm',
      price: 79.99,
      rating: 4.5
    }]
  };
  return <div className="flex flex-col min-h-screen w-full bg-white">
      <Header />
      <main className="flex-grow">
        {/* Breadcrumb */}
        <div className="bg-gray-50 py-3">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="flex items-center text-sm text-gray-500">
              <a href="/" className="hover:text-[#0e4c92]">
                Home
              </a>
              <ChevronRight className="h-4 w-4 mx-2" />
              <a href="/categories" className="hover:text-[#0e4c92]">
                Categories
              </a>
              <ChevronRight className="h-4 w-4 mx-2" />
              <a href="/categories/blood-pressure-monitors" className="hover:text-[#0e4c92]">
                Blood Pressure Monitors
              </a>
              <ChevronRight className="h-4 w-4 mx-2" />
              <span className="text-gray-700 font-medium">{product.name}</span>
            </div>
          </div>
        </div>
        {/* Product detail */}
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
          <div className="lg:grid lg:grid-cols-2 lg:gap-8">
            {/* Product images */}
            <div>
              <div className="aspect-w-4 aspect-h-3 rounded-lg overflow-hidden">
                <ImageWithLoading src={product.images[activeImage]} alt={product.name} className="w-full h-full object-center object-cover" />
              </div>
              <div className="mt-4 grid grid-cols-3 gap-4">
                {product.images.map((image, idx) => <button key={idx} onClick={() => setActiveImage(idx)} className={`aspect-w-3 aspect-h-2 rounded-lg overflow-hidden ${activeImage === idx ? 'ring-2 ring-[#0e4c92]' : 'ring-1 ring-gray-200'}`}>
                    <ImageWithLoading src={image} alt={`${product.name} - Image ${idx + 1}`} className="w-full h-full object-center object-cover" />
                  </button>)}
              </div>
            </div>
            {/* Product info */}
            <div className="mt-10 lg:mt-0">
              <h1 className="text-3xl font-bold text-gray-900">
                {product.name}
              </h1>
              <div className="mt-2">
                <p className="text-lg text-[#0e4c92] font-medium">
                  {product.brand}
                </p>
              </div>
              <div className="mt-3 flex items-center">
                <div className="flex items-center">
                  {[0, 1, 2, 3, 4].map(rating => <Star key={rating} className={`h-5 w-5 ${product.rating > rating ? 'text-yellow-400 fill-yellow-400' : 'text-gray-200'}`} />)}
                </div>
                <p className="ml-3 text-sm text-gray-600">
                  {product.rating} ({product.reviewCount} reviews)
                </p>
              </div>
              <div className="mt-6">
                <h2 className="sr-only">Product information</h2>
                <p className="text-3xl text-gray-900">${product.price}</p>
                <p className="mt-2 text-sm text-gray-500">
                  Free shipping on orders over $50
                </p>
              </div>
              <div className="mt-4 flex items-center">
                <Check className="h-5 w-5 text-green-500" />
                <p className="ml-2 text-sm text-green-600 font-medium">
                  {product.availability}
                </p>
              </div>
              <div className="mt-6">
                <div className="flex space-x-4">
                  <a href="/reviews/blood-pressure-monitors" className="flex-1 bg-[#0e4c92] border border-transparent rounded-md py-3 px-8 flex items-center justify-center text-base font-medium text-white hover:bg-[#0a3a70] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#0e4c92]">
                    Read Full Review
                  </a>
                  <button className="flex-none rounded-md p-3 text-gray-400 hover:text-[#0e4c92] border border-gray-300">
                    <Heart className="h-6 w-6" />
                  </button>
                  <button className="flex-none rounded-md p-3 text-gray-400 hover:text-[#0e4c92] border border-gray-300">
                    <Share2 className="h-6 w-6" />
                  </button>
                </div>
              </div>
              <div className="mt-8 border-t border-gray-200 pt-6">
                <h3 className="text-lg font-medium text-gray-900">
                  Highlights
                </h3>
                <div className="mt-4 prose prose-sm text-gray-600">
                  <ul className="list-disc space-y-2 pl-5">
                    {product.features.slice(0, 4).map((feature, idx) => <li key={idx}>{feature}</li>)}
                  </ul>
                </div>
              </div>
            </div>
          </div>
          {/* Product tabs */}
          <div className="mt-16">
            <div className="border-b border-gray-200">
              <nav className="-mb-px flex space-x-8">
                <button onClick={() => setActiveTab('description')} className={`${activeTab === 'description' ? 'border-[#0e4c92] text-[#0e4c92]' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'} whitespace-nowrap pb-4 px-1 border-b-2 font-medium text-sm`}>
                  Description
                </button>
                <button onClick={() => setActiveTab('features')} className={`${activeTab === 'features' ? 'border-[#0e4c92] text-[#0e4c92]' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'} whitespace-nowrap pb-4 px-1 border-b-2 font-medium text-sm`}>
                  Features
                </button>
                <button onClick={() => setActiveTab('specifications')} className={`${activeTab === 'specifications' ? 'border-[#0e4c92] text-[#0e4c92]' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'} whitespace-nowrap pb-4 px-1 border-b-2 font-medium text-sm`}>
                  Specifications
                </button>
                <button onClick={() => setActiveTab('reviews')} className={`${activeTab === 'reviews' ? 'border-[#0e4c92] text-[#0e4c92]' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'} whitespace-nowrap pb-4 px-1 border-b-2 font-medium text-sm`}>
                  Reviews ({product.reviewCount})
                </button>
              </nav>
            </div>
            <div className="mt-6">
              {activeTab === 'description' && <div className="prose prose-lg max-w-none text-gray-600">
                  <p>{product.description}</p>
                  <p className="mt-4">
                    Regular monitoring of your blood pressure at home is an
                    important part of managing your heart health. The Premium
                    Blood Pressure Monitor X1 makes it easy to track your
                    readings over time and share them with your healthcare
                    provider.
                  </p>
                  <p className="mt-4">
                    With its clinically validated accuracy, you can trust the
                    readings to make informed decisions about your health. The
                    monitor's memory function allows you to track trends over
                    time, while the Bluetooth connectivity lets you sync your
                    readings with your smartphone for easy sharing with your
                    doctor.
                  </p>
                </div>}
              {activeTab === 'features' && <div className="prose prose-lg max-w-none text-gray-600">
                  <ul className="space-y-4">
                    {product.features.map((feature, idx) => <li key={idx} className="flex items-start">
                        <Check className="h-5 w-5 text-green-500 mt-1 mr-2 flex-shrink-0" />
                        <span>{feature}</span>
                      </li>)}
                  </ul>
                </div>}
              {activeTab === 'specifications' && <div className="border-t border-gray-200">
                  <dl>
                    {Object.entries(product.specifications).map(([key, value], idx) => <div key={key} className={`${idx % 2 === 0 ? 'bg-gray-50' : 'bg-white'} px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6`}>
                          <dt className="text-sm font-medium text-gray-500">
                            {key}
                          </dt>
                          <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                            {value}
                          </dd>
                        </div>)}
                  </dl>
                </div>}
              {activeTab === 'reviews' && <div>
                  <div className="flex items-center mb-6">
                    <div className="flex items-center">
                      {[0, 1, 2, 3, 4].map(rating => <Star key={rating} className={`h-5 w-5 ${product.rating > rating ? 'text-yellow-400 fill-yellow-400' : 'text-gray-200'}`} />)}
                    </div>
                    <p className="ml-3 text-sm text-gray-700">
                      Based on {product.reviewCount} reviews
                    </p>
                  </div>
                  <div className="space-y-8">
                    {/* Sample reviews */}
                    {[{
                  author: 'Sarah J.',
                  rating: 5,
                  date: 'May 15, 2025',
                  title: 'Excellent accuracy and ease of use',
                  comment: "I've been using this monitor for 3 months now and I'm very impressed with its accuracy compared to readings at my doctor's office. The app connectivity makes it easy to track my readings over time."
                }, {
                  author: 'Michael T.',
                  rating: 4,
                  date: 'April 3, 2025',
                  title: 'Great monitor, slightly bulky',
                  comment: "The readings are very consistent and the display is easy to read. My only complaint is that it's a bit larger than I expected, which makes it less convenient for travel."
                }].map((review, idx) => <div key={idx} className="border-t border-gray-200 pt-6">
                        <div className="flex items-center mb-1">
                          <div className="flex items-center">
                            {[0, 1, 2, 3, 4].map(rating => <Star key={rating} className={`h-4 w-4 ${review.rating > rating ? 'text-yellow-400 fill-yellow-400' : 'text-gray-200'}`} />)}
                          </div>
                          <h4 className="ml-3 text-sm font-medium text-gray-900">
                            {review.title}
                          </h4>
                        </div>
                        <div className="flex space-x-2 text-sm text-gray-500">
                          <span>{review.author}</span>
                          <span>&middot;</span>
                          <span>{review.date}</span>
                        </div>
                        <div className="mt-2 text-sm text-gray-600">
                          <p>{review.comment}</p>
                        </div>
                      </div>)}
                    <div className="mt-8">
                      <a href="/reviews/blood-pressure-monitors" className="text-[#0e4c92] font-medium hover:text-[#0a3a70]">
                        See all {product.reviewCount} reviews
                      </a>
                    </div>
                  </div>
                </div>}
            </div>
          </div>
          {/* Related products */}
          <div className="mt-16">
            <h2 className="text-2xl font-bold text-gray-900">
              Related Products
            </h2>
            <div className="mt-6 grid grid-cols-1 md:grid-cols-3 gap-6">
              {product.relatedProducts.map(relatedProduct => <a key={relatedProduct.id} href={`/product/${relatedProduct.id}`} className="group border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition-shadow">
                  <div className="aspect-w-4 aspect-h-3">
                    <ImageWithLoading src={relatedProduct.image} alt={relatedProduct.name} className="w-full h-48 object-cover" />
                  </div>
                  <div className="p-4">
                    <h3 className="text-lg font-medium text-gray-900 group-hover:text-[#0e4c92]">
                      {relatedProduct.name}
                    </h3>
                    <p className="mt-1 text-lg font-semibold text-[#0e4c92]">
                      ${relatedProduct.price}
                    </p>
                    <div className="mt-2 flex items-center">
                      <div className="flex items-center">
                        {[0, 1, 2, 3, 4].map(rating => <svg key={rating} className={`h-5 w-5 ${relatedProduct.rating > rating ? 'text-yellow-400' : 'text-gray-200'}`} fill="currentColor" viewBox="0 0 20 20">
                            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                          </svg>)}
                      </div>
                      <p className="ml-2 text-sm text-gray-600">
                        {relatedProduct.rating}
                      </p>
                    </div>
                  </div>
                </a>)}
            </div>
          </div>
        </div>
      </main>
      <Footer />
    </div>;
};